<template>
    <div>
        <p>{{name}}</p>
        <p>{{getName()}}</p>
        <p>{{number}}</p>
        <p>{{names}}</p>
        <input type="text" v-model="firstName">
        <input type="text" v-model="lastName">
        <input type="checkbox" name="" id="" v-model="hello" :value="1">
        <input type="checkbox" name="" id="" v-model="hello" :value="2">
        <input type="checkbox" name="" id="" v-model="hello" :value="3">
        <br>
        <button :click="poparr()">zhengyige</button>
    </div>
</template>

<script>
export default {
    name:'computed',
    data() {
        return {
            firstName:'liu',
            lastName:'yz',
            number:0,
            hello:[1,2,3]
        }
    },
    computed:{
        
        // 生成缓存
        name(){
            return `${this.firstName+' '+this.lastName}`
        },
        fullName:{
            set(name){
                let names = name.split(' ')
                this.firstName = names[0]
                this.lastName = names[1]
            },
            get(){
                return `${this.firstName+' '+this.lastName}`
            }
        }
    },
    watch:{
        // firstName(newName,oldName){
        //     this.names = newName +' ' +this.name
        // }
        // 这个在初始化的时候不能触发所以应该这么写
        firstName : {
            handler(newName,oldName){
                this.names = newName +' ' +this.name
            },
            immediate:true
            // 这个单词表表示能在加载时候立即触发
        },

    },
    methods:{
        getName(){
            return `${this.firstName+' '+this.lastName}`
        },
        poparr(){
            this.hello.pop(1)
        }
    }
}
</script>

<style scoped>

</style>

